<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-12-30 15:50:40
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-03-10 11:14:16
-->
<template>
  <div>
    <div class="info">
      <div class="selChi">
        <el-select v-model="value" placeholder="" @change="selChange">
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.remark"
            :value="index"
          >
          </el-option>
        </el-select>
      </div>
      <div class="basics">套餐</div>
      <div class="Usage">
        <div class="usage-one">
          <div class="Usage-title">使用情况</div>
          <el-progress
            type="circle"
            :percentage="infoFrom.useRatio"
            :show-text="false"
            :width="141"
          >
          </el-progress>
          <div style="margin-top: 40px; margin-bottom: 10px">
            已使用个数：{{ infoFrom.used }}/个
          </div>
          <div>已购买个数：{{ infoFrom.allUse }}/个</div>
          <div class="userSurplus">
            <div class="userSurplus-num">{{ infoFrom.lastUse }}</div>
            <div>剩余可用</div>
          </div>
        </div>
        <div class="usage-three">
          <div class="Usage-title">到期情况</div>
          <el-progress
            type="circle"
            :percentage="infoFrom.timeRatio"
            :show-text="false"
            :width="141"
          ></el-progress>
          <div style="margin-top: 40px; margin-bottom: 10px">
            开始时间：{{ infoFrom.startTime | openDate }}
          </div>
          <div>结束时间：{{ infoFrom.endTime | expiryDate }}</div>
          <div class="userSurplus">
            <div class="userSurplus-num">{{ infoFrom.lastDay }}</div>
            <div>剩余天数</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getServicesInfo, getPackageInfo } from "@/api/purchase";
export default {
  filters: {
    openDate: function (value) {
      if (value == "") {
        value = "-";
      }
      return value;
    },
    expiryDate: function (value) {
      if (value == "") {
        value = "-";
      }
      return value;
    },
  },
  data() {
    return {
      value: 0,
      options: [
        {
          value: 1,
          label: "证书VIP",
        },
        {
          value: 2,
          label: "资质VIP",
        },
        {
          value: 3,
          label: "证书托管",
        },
        {
          value: 4,
          label: "资质托管",
        },
      ],
      percentageOne:10,
      percentageThree: 20,
      chiooseInfo: true,
      infoFrom: {
        companyName: "",
        abbreviation: "",
      },
      infoRules: {
        serialNumber: [
          {
            required: true,
          },
        ],
        companyName: [
          {
            required: true,
            message: "请填写企业名称",
            trigger: "blur",
          },
        ],
        abbreviation: [
          {
            required: true,
            message: "请填写企业简称",
            trigger: "blur",
          },
          {
            min: 1,
            max: 6,
            message: "企业简称只允许1-6个字符",
            trigger: "blur",
          },
        ],
      },
      logoShow: true,
      fileList: [],
      fileList1: [],
      basicRules: {
        companyName: [
          {
            required: true,
            message: "请填写企业名称",
            trigger: "blur",
          },
        ],
      },
      userInfo: {},
      enterpriseForm: {
        companyName: "",
      },
      basicForm: {
        companyName: "",
      },
      file: {},
      file1: {},
      selCollection: {},
    };
  },
  created() {
    this.getServicesInfo();
  },
  methods: {
    // 下拉变化
    selChange(val) {
      this.selCollection=this.options[val]
      this.getPackageInfo();
    },
    // 获取证书套餐的具体信息
    getPackageInfo() {
      getPackageInfo(this.selCollection).then((res) => {
        console.log(res);
        this.infoFrom = res;
        console.log(this.infoFrom);
        // this.infoFrom=res.rows
      });
    },
    // 获取下拉
    getServicesInfo() {
      getServicesInfo().then((res) => {
        console.log(res);
        this.options = res.data;
        this.selCollection = res.data[0];
           // 下拉变化
       this.getPackageInfo() 
  
          // this.getPackageInfo();
        
        // this.options=res.rows
      });
    },
  },
};
</script>

<style lang="less" scoped>
.info {
  position: relative;
  margin-top: 4Px;
  width: 100%;
  padding: 30Px;
  background-color: #fff;
  box-sizing: border-box;
  .info-title {
    position: relative;
    margin-left: 10Px;
    font-size: 14Px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 700;
    color: #2b2b2b;
    &::before {
      content: "";
      position: absolute;
      top: 3Px;
      left: -10Px;
      width: 2Px;
      height: 14Px;
      background-color: #0e62fa;
    }
  }
  .info-content {
    margin: 20Px 10Px;
    font-size: 14Px;
    tr {
      line-height: 30Px;
      td {
        width: 350Px;
      }
    }
  }
}
.content {
  margin-top: 15Px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .content-box {
    padding: 40Px 30Px;
    width: 49.5%;
    height: 550Px;
    background-color: #fff;
    box-sizing: border-box;
    .info-title {
      position: relative;
      margin-left: 10Px;
      font-size: 14Px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 700;
      color: #2b2b2b;
      &::before {
        content: "";
        position: absolute;
        top: 3Px;
        left: -10Px;
        width: 2Px;
        height: 14Px;
        background-color: #0e62fa;
      }
    }
    .content-content {
      font-size: 14Px;
      margin-top: 20Px;
      margin-left: 10Px;
      .el-input {
        margin-top: 10Px;
        width: 350Px;
        margin-bottom: 20Px;
      }

      .el-button {
        margin-top: 30Px;
        width: 100Px;
      }
    }
  }
}

.basics {
  position: relative;
  font-size: 14Px;
}
.basics::before {
  content: "";
  position: absolute;
  left: -6Px;
  top: 1Px;
  width: 3Px;
  height: 14Px;
  background: #1267fa;
}
.Usage {
  display: flex;
  margin-top: 40Px;
  .Usage-title {
    margin-bottom: 20Px;
  }
  .usage-one {
    width: 200Px;
    height: 300Px;
    position: relative;
    text-align: center;
    .userSurplus {
      position: absolute;
      top: 75Px;
      left: 70Px;
      .userSurplus-num {
        font-size: 40Px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #2b2b2b;
      }
    }
  }

  .usage-three {
    margin-left: 200Px;
    width: 400Px;
    height: 300Px;
    position: relative;
    text-align: center;
    .userSurplus {
      position: absolute;
      top: 75Px;
      left: 170Px;
      .userSurplus-num {
        font-size: 40Px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #2b2b2b;
      }
    }
  }
}
.selChi {
  position: absolute;
  top: 30Px;
  right: 30Px;
}
</style>